<template>
  <div class="form-layout">
    <!--左侧导航-->
    <div class="nav-left">
      <customAnchor
        :itemList="[
          { name: 'box-base', title: '基础信息' },
          { name: 'box-info', title: '运行配置' },
          { name: 'box-exec', title: '执行描述' },
        ]"
      />
    </div>
    <!--表单区域-->
    <div class="form-right" ref="formRight">
      <customForm :data="form" :rules="propRules" ref="editForm" :disabled="propReadonly">
        <template #content>
          <div id="box-base" class="box-title">基础信息</div>
          <customFormItem label="名称" name="jobName" :parent="_self" :form="form" width2x/>
          <customFormItem
            label="组名"
            name="jobGroup"
            :parent="_self"
            :form="form"
            :type="constCommon.formItemType.selectStatic.name"
            :config="{ options: utils.getDictDataList('task_group') }"
            width2x
          />
          <customFormItem label="任务描述" name="description" :parent="_self" :form="form" fullWidth :type="constCommon.formItemType.textarea.name"
            :config="{maxlength: 500}"
          />

          <div id="box-info" class="box-title">运行配置</div>
          <customFormItem
            label="启用"
            name="flagEnabled"
            :parent="_self"
            :form="form"
            :type="constCommon.formItemType.switch.name"
            help="选中则启用该任务"
          />
          <customFormItem
            label="执行周期"
            name="cronExpression"
            :parent="_self"
            :form="form"
            placeholder="请输入"
            help="参考： https://www.matools.com/cron/"
            @change="cronExpressionChange"
            :type="constCommon.formItemType.selectDict.name"
            :config="{dictType: constCommon.dictType.cronExpression, clearable: false}"
          />
          <customFormItem label="调用目标" name="invokeTarget" :parent="_self" :form="form" fullWidth/>
          <customFormItem label="最近执行" name="cronTime" :parent="_self" :form="form" :type="constCommon.formItemType.staticHtml.name" fullWidth/>


          <div id="box-exec" class="box-title">执行描述</div>
          <customFormItem label="任务状态" name="statusExecution" :parent="_self" :form="form"
                          :type="constCommon.formItemType.staticHtml.name"
                          :config="{dictType: constCommon.dictType.sysJobExecutionStatus, defaultValue: 'not_run'}"
          />

          <customFormItem label="上次执行成功" name="lastSuccessDate" :parent="_self" :form="form"  :type="constCommon.formItemType.datePicker.name"
          />
          <customFormItem label="下次执行日期" name="nextFireTime" :parent="_self" :form="form"  :type="constCommon.formItemType.datePicker.name"
          />

          <customFormItem label="上次执行描述" name="lastRemark" :parent="_self" :form="form" fullWidth  :type="constCommon.formItemType.textarea.name"
                          :config="{maxRows: 20}"
          />

        </template>
      </customForm>
    </div>
  </div>
</template>

<script>
import customAnchor from '@/components/custom/form/customAnchor.vue'

export default {
  data() {
    return {
      form: {},
      viewData: {},
    }
  },
  methods: {
    // 执行周期变化
    cronExpressionChange() {
      if (this.strings.isBlank(this.form.cronExpression)) {
        this.$set(this.form, 'cronTime', '')
        return
      }
      this.$ajax.post('/sys/schedule_job/cronTime', { 'cronExpression': this.form.cronExpression}).then(resp => {
        if (resp.code == 0) {
          if (resp.data) {
            this.$set(this.form, 'cronTime', resp.data.slice(1, 3).join('  '))
          } else {
            this.$set(this.form, 'cronTime', '执行周期配置错误')
          }
        }
      })
    }
  },

  created() {
    this.$emit('event-register', {
      validate: (callback) => {
        return this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        this.$emit('data-callback', this.form)
        return true
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)
        if (!this.form.id) {
          this.$set(this.form, 'misfireInstruction', 1)
        }
        this.cronExpressionChange()
      },
      afterSave: () => {},
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {},
      beforeFlow: (flowButtonKey) => {
        return true
      },
      afterFlow: (flowButtonKey) => {},
      beforeClose: () => {
        return true
      },
    })
  },
  props: {
    propParent: Object,
    propInitData: Object,
    propPrimaryKey: String,
    propDictionaries: Object,
    propCurrentRow: Object,
    propViewFormData: Object,
    propReadonly: Boolean,
    propStatus: String,
    propRules: Object,
  },
  components: {
    customAnchor,
  },
  computed: {},
}
</script>
